import React, { Component } from 'react'

type IProps = {}
type IState = {
    xing: string,
    ming: string,
    [key: string]: any  // 前面参数是它的子集
}

export default class MyInput extends Component<IProps, IState> {
    constructor(props: IProps){
        super(props);
        this.state = {
            xing: '',
            ming: ''
        }
    }
    // 使用了同一个事件处理函数
    handleChange = (e: React.ChangeEvent<HTMLInputElement>)=>{ // e的类型定义：鼠标放在onChange事件上的提示;HTMLInputElement：鼠标放在input上的提示，如果不定义这个泛型e.target.value，value的值取不到
        this.setState({
            // xing: e.target.value
            [e.target.name]: e.target.value
        })
    }

    render() {
        return (
            <div>
                <label htmlFor="">姓：
                    <input type="text"
                    name="xing"
                    value={this.state.xing}
                    onChange={this.handleChange} 
                    /> 
                </label>
                <label htmlFor="">名：
                    <input type="text"
                    name="ming"
                    value={this.state.ming}
                    onChange={this.handleChange}
                    />
                </label>
                <p>{this.state.xing} {this.state.ming}</p>
            </div>
        )
    }
}
